<template>
  <div class="forum-page">
    <el-card shadow="never">
      <div slot="header">
        <h3 style="text-align: center">公益论坛</h3>
        <el-popover
          placement="right"
          width="500"
          trigger="click"
          v-model="share">
          <div style="display: flex">
            <el-input v-model="shareContent" placeholder="请输入内容"></el-input>
            <el-button icon="el-icon-edit" @click="createPostsInfo(user.id, shareContent)"></el-button>
          </div>
          <el-link icon="el-icon-edit" slot="reference" :underline="false">分享公益</el-link>
        </el-popover>
      </div>
      <el-row>
        <el-col :span="24">
          <el-timeline>
            <el-timeline-item v-for="item in forumData.records" :key="item.id"
                              :timestamp="'评论: '+ item.comments + ' ```  点赞: ' + item.likes + ' ``` 发表时间: ' + item.createTime">
              <el-col>
                <el-card shadow="hover">
                  <el-alert type="error" effect="dark" :closable='false' :title="item.userName" style="background-color: #f0f9eb">
<!--                            style="background-color: #f0f9eb">-->
                    <span style="color: #606266; font-size: 14px">{{ item.content }}</span>
<!--                    #606266;-->
                  </el-alert>
<!--                  <el-alert type="info" :closable='false' title="评论：">-->
                  <el-alert type="info" :closable='false'>
                    <div>
                      <p class="forum-comments" v-for="i in item.comment">
                        {{ i.userName }} ( {{ i.createTime }} ): {{ i.content }}
                      </p>
                    </div>
                  </el-alert>
                  <el-link icon="el-icon-star-off" @click="createLikes(user.id, item.id)" :underline="false">点赞
                  </el-link>
                  <el-popover
                    placement="right"
                    width="500"
                    trigger="click"
                    v-model="item.visible">
                    <div style="display: flex">
                      <el-input v-model="commentContent" placeholder="请输入内容"></el-input>
                      <el-button icon="el-icon-edit"
                                 @click="createComment(user.id, item.id, commentContent)"></el-button>
                    </div>
                    <el-link icon="el-icon-chat-round" slot="reference" :underline="false">评论</el-link>
                  </el-popover>
                </el-card>
              </el-col>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>

      <div v-if="forumData.total > 0" style="width: 500px; margin: 0 auto;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="forumData.current"
          :page-sizes="[10, 20, 50]"
          :page-size="forumData.size"
          :total="forumData.total"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ForumPage",
  data() {
    return {
      share: false,
      shareContent: '',
      user: {},
      forumData: {
        total: 0,
        current: 1,
        records: [],
        size: 10,
      },
      commentContent: ''
    };
  },
  methods: {
    success(message) {
      this.$message({
        message: message,
        type: 'success'
      });
    },
    error(message) {
      this.$message.error(message);
    },
    async fetchForumData(currentPage, pageSize) {
      const {data} = await axios.post("http://localhost:8077/share/hope/posts/page", {
        page: {
          current: currentPage,
          size: pageSize,
        },
        query: {},
      });
      this.forumData = data.data;
    },
    createComment(userId, postsId, contents) {
      const data = {
        userId: userId,
        postsId: postsId,
        content: contents
      }
      this.visible = false
      axios.post('http://localhost:8077/share/hope/comment/create', data)
        .then(response => {
          this.commentContent = ''
          this.fetchForumData(this.forumData.current, this.forumData.size)
          if (response.data.code !== 20000) {
            this.error(response.data.msg)
          } else {
            this.success(response.data.msg)
          }
        })
    },
    createPostsInfo(userId, contents) {
      const data = {
        userId: userId,
        content: contents
      }
      this.share = false
      axios.post('http://localhost:8077/share/hope/posts/create', data)
        .then(response => {
          this.shareContent = ''
          this.fetchForumData(this.forumData.current, this.forumData.size)
          if (response.data.code !== 20000) {
            this.error(response.data.msg)
          } else {
            this.success(response.data.msg)
          }
        })
    },
    createLikes(userId, postsId) {
      axios.get(`http://localhost:8077/share/hope/posts_likes/create?userId=${userId}&postsId=${postsId}`)
        .then(response => {
          if (response.data.code !== 20000) {
            this.error(response.data.msg)
          } else {
            this.success(response.data.msg)
          }
          this.fetchForumData(this.forumData.current, this.forumData.size)
        })

    },
    handleSizeChange(pageSize) {
      this.fetchForumData(this.forumData.current, pageSize);
    },
    handleCurrentChange(currentPage) {
      this.fetchForumData(currentPage, this.forumData.size);
    },
    handleClick() {
      // 在这里处理按钮点击事件
    },
  },
  async created() {
    await this.fetchForumData(this.forumData.current, this.forumData.size);
    this.user = JSON.parse(localStorage.getItem('userInfo'))
  },
};
</script>

<style scoped>
.forum-page {
  padding: 20px;
}
</style>
